// AddressPanel.vue
<script setup lang="ts">
  import { reqGetAddressList } from '@/api/address'
  import { useUserStore } from '@/stores/user'
  import type { AddressItem } from '@/types/address'
  import { onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const emits = defineEmits<{
    /** 关闭弹出层事件 */
    (event: 'close'): void
    /** 选择地址事件 */
    (event: 'changeAddress', address: AddressItem, addressId: string): void
  }>()
  const userStore = useUserStore()
  // 获取地址列表
  const addressList = ref<AddressItem[]>()
  const getAddressList = async () => {
    if (userStore.profile?.token) {
      const res = await reqGetAddressList()
      addressList.value = res.result
    }
  }
  // 当前地址的激活项
  const activeIndex = ref(-1)
  // 点击地址的回调
  const onChangeAddress = (index: number, id: string) => {
    activeIndex.value = index
    // 找到当前 id 的地址信息
    const currentAddress = addressList.value!.find(item => item.id === id)!
    emits('changeAddress', currentAddress, id)
  }

  onShow(() => {
    getAddressList()
  })
</script>

<template>
  <view class="address-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @click="emits('close')"></text>
    <!-- 标题 -->
    <view class="title">配送至</view>
    <!-- 内容 -->
    <view v-if="userStore.profile?.token">
      <view class="content">
        <view
          class="item"
          v-for="(item, index) in addressList"
          :key="item.id"
          @click="onChangeAddress(index, item.id)"
        >
          <view class="user">{{ item.receiver }} {{ item.contact }}</view>
          <view class="address">{{ item.address }}</view>
          <text class="icon" :class="{ 'icon-checked': activeIndex === index }"></text>
        </view>
      </view>
      <view class="footer">
        <navigator
          class="button primary"
          open-type="navigate"
          url="/pagesMember/address-form/address-form"
        >
          新建地址
        </navigator>
      </view>
    </view>
    <view v-else>
      <navigator class="login-btn" open-type="navigate" url="/pagesMember/login/login">
        请先登录
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
  .address-panel {
    padding: 0 30rpx;
    border-radius: 10rpx 10rpx 0 0;
    position: relative;
    background-color: #fff;
  }

  .title {
    line-height: 1;
    padding: 40rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: normal;
    border-bottom: 1rpx solid #ddd;
    color: #444;
  }

  .close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }

  .content {
    min-height: 300rpx;
    max-height: 540rpx;
    overflow: auto;
    padding: 20rpx;
    .item {
      padding: 30rpx 50rpx 30rpx 60rpx;
      background-size: 40rpx;
      background-repeat: no-repeat;
      background-position: 0 center;
      background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
      position: relative;
    }
    .icon {
      color: #999;
      font-size: 40rpx;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      right: 0;
    }
    .icon-checked {
      color: #27ba9b;
    }
    .icon-ring {
      color: #444;
    }
    .user {
      font-size: 28rpx;
      color: #444;
      font-weight: 500;
    }
    .address {
      font-size: 26rpx;
      color: #666;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;

    .button {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin: 0 20rpx;
      color: #fff;
      border-radius: 72rpx;
    }

    .primary {
      color: #fff;
      background-color: #27ba9b;
    }

    .secondary {
      background-color: #ffa868;
    }
  }
  .login-btn {
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background-color: #27ba9b;
    border-radius: 50rpx;
  }
</style>
